<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <title>跳蚤-AJAX注册</title>

    <jsp:include page="${ctx}/page/common/css.jsp"/>


    <style>
        label.text-muted {
            font-size: 13px;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
<jsp:include page="${ctx}/page/common/header.jsp"/>

<div class="container pt-4 pb-4">
    <div class="container pt-5">
        <div class="row">
            <div class="col-12">
                <h4 class="border-bottom pb-2">
                    个人注册
                </h4>
                <form id="registerForm" action="${ctx}/register" enctype="multipart/form-data" method="post">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="nickname">昵称</label>
                            <input type="text" class="form-control" name="nickname" id="nickname" value="">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="headFile">头像</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="headFile" name="headFile">
                                <label class="custom-file-label" for="headFile">选择图片...</label>
                                <div class="invalid-feedback">Example invalid custom file feedback</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="login">登录账号</label>
                            <input type="text" class="form-control" name="login" id="login" value="">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="pwd">登录密码</label>
                            <input type="password" class="form-control" name="pwd" id="pwd" value="">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="sex">性别</label>
                            <select name="sex" id="sex" class="form-control">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="age">年龄</label>
                            <input type="number" class="form-control" name="age" id="age" value="24">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-lighter text-muted" for="city">城市</label>
                            <input type="text" class="form-control" name="city" id="city" value="成都">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-lighter text-muted" for="intro">自我介绍</label>
                        <input type="text" class="form-control" name="intro" id="intro"
                               placeholder="一句话让别人记住你">
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
                            <label class="form-check-label" for="invalidCheck2">
                                同意跳蚤网的用户协议
                            </label>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="register();">注册</button>
                </form>

            </div>
        </div>
    </div>
</div>


<jsp:include page="${ctx}/page/common/footer.jsp"/>

<jsp:include page="${ctx}/page/common/js.jsp"/>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script type="text/javascript">
    $(function () {
        bsCustomFileInput.init();
    });

    function register() {
        // [
        //     {name: 'firstname', value: 'Hello'},
        //     {name: 'lastname', value: 'World'},
        //     {name: 'alias', value: 'A'},
        // ]
        var registerArray = $('#registerForm').serializeArray();


        var formData = new FormData();
        $.each(registerArray, function (i, e) {
            formData.append(e.name, e.value);
        });

        formData.append('headFile', document.getElementById('headFile').files[0]);

        $.ajax({
            url: '${ctx}/registerAjax',
            type: 'POST',
            async: false,
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据(必须设置)
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头（必须设置）
            success: function (result) {
                if (result.success) {
                    alert('恭喜你注册成功！现在去登录');
                    location.href = '${ctx}/page/login.jsp';
                } else {
                    alert(result.message);
                }

            },
            error: function (response) {
                alert('网络错误，稍后重试')
            }
        });
    }
</script>
</body>
</html>
